<template>
	<view>
		<!-- 微信头像和用户名 -->
		<view class="wx-info">
			<img class="img" :src="user.img" alt="" />
			<text class="txt">{{user.userName}}</text>
		</view>
		<!-- 底部信息框 -->
		<view class="bottom">
			<view class="bottom-top">
				<text class="top-txt">手机号码</text>
				<input class="top-input" placeholder="请输入您的手机号" @click="gitnum" v-model="num"/>
				<text class="top-txt1" @click="$refs.pop.open()">自动获取</text>
			</view>
			<view class="bottom-bot">
				<text class="bot-txt">生日</text>
				<picker :disabled="date == '请选择您的生日日期' ? false : true " class="bot-picker" mode="date" :value="date" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view>{{date}}</view>
				</picker>
			</view>
      <button class="btn" @click="saveUserInfo">保存</button>
			<!-- 电话弹窗 -->
			<uni-popup ref="popup" type="center">
				<my-info-form @close="closeHandler"  @changeNum="changeNum"></my-info-form>
			</uni-popup>
			<!-- 自动获取 -->
			<uni-popup ref="pop" type="bottom">
				<my-info-autons @noclose="$refs.pop.close()" :data="num" @changeNums="changeNums"></my-info-autons>
			</uni-popup>


		</view>
	</view>
</template>

<script>
  import {mapState,mapMutations} from "vuex"
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: "请选择您的生日日期",
				num:""
			}
		},
		computed: {
      ...mapState("user",["user"]),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
      ...mapMutations("user",["setUser"]),
      //用于保存处理
     async saveUserInfo(){
        if(this.num===''){
          uni.showToast({
            title:"请输入手机号",
            icon:"none"
          })
          return
        }
        const user = uniCloud.importObject("user")
       const {data:res} = await user.updataUserPhoneAndBirthDay({
          "id": this.user._id,
          "birthday": this.date,
          "phone": this.num.toString()
        })
        uni.showToast({
          title:"保存成功",
          icon:"success"
        })
        const {data:r} = await user.getUserById(this.user._id)
        this.setUser(r[0])
        // console.log(res);
      },
      //确认电话弹窗时的处理
      closeHandler(e){
        this.num = e
        this.$refs.popup.close()
      },
			changeNum(val){
				this.num = val
				
			},
			changeNums(val){
				this.num = val
				
			},
			gitnum(){
				this.$refs.popup.open()
			},
		
			bindDateChange: function(e) {
        this.date = e.detail.value
				// uni.showModal({
				// 	title: '提示',
				// 	content: '生日设定后无法再次更改',
				// 	success: res => {
				// 		if (res.confirm) {
				// 			console.log('用户点击确定');
				// 			
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// });
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 头像信息
	.wx-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		top: 20%;
		left: 35%;
		.img {
			width: 100rpx;
			height: 100rpx;
      border-radius: 100rpx;
		}

		.txt {
			font-size: 35rpx;
			font-weight: normal;
			letter-spacing: 2rpx;
			color: #2a2a2a;

		}
	}

	// 底部信息框
	.bottom {
		width: 100%;
		height: 350rpx;
		position: absolute;
		bottom: 8%;

		// 手机号码
		.bottom-top {
			width: 94%;
			height: 100rpx;
			border: 1rpx solid black;
			display: flex;
			align-items: center;
			margin-left: 3%;
			margin-bottom: 30rpx;
			position: relative;

			.top-txt {
				margin-left: 30rpx;
			}

			.top-input {
				position: absolute;
				left: 170rpx;
				font-size: 30rpx;
				color: #b6b6b6;
			}

			.top-txt1 {
				position: absolute;
				right: 30rpx;
			}

		}

		// 生日
		.bottom-bot {
			width: 94%;
			height: 100rpx;
			border: 1rpx solid black;
			display: flex;
			align-items: center;
			margin-left: 3%;
			position: relative;
		}
    .btn{
      height: 100rpx;
      width: 94%;
      background-color: #fff;
      margin-top: 30rpx;
      border: 1px #000 solid;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0;
      
    }
		.bot-txt {
			margin-left: 30rpx;
		}

		.bot-picker {
			position: absolute;
			left: 170rpx;


		}

		.bot-input {
			border: 1rpx solid red;
		}
	}
</style>